<template>
  <div class="wode">
    <div class="wodeone">
      <div class="wode1">
        <img src="../../../../public/huge.webp" alt="">
      </div>
      <span @click="golog">点击登录</span>
    </div>
    <div class="wodetwo">
      <div class="wodetwo1">
        <span>0</span>
        <span>商品收藏</span>
      </div>
      <div class="wodetwo1">
        <span>5</span>
        <span>浏览记录</span>
      </div>
      <div class="wodetwo1">
        <span>4</span>
        <span>优惠券</span>
      </div>
    </div>
    <div class="wodethree">
      <span>线上订单</span>
      <span class="w1" @click="rightClick">门店订单</span>
      <van-grid style="width: 97%; margin: 0 5px" :column-num="5">
        <van-grid-item icon="paid" text="待付款" @click="funA" style="height: 80px; border-radius: 0 0 10px 0" />
        <van-grid-item icon="gift-o" text="待发货" @click="funB" style="height: 80px" />
        <van-grid-item icon="shop-collect-o" text="待提货" @click="funC" style="height: 80px" />
        <van-grid-item icon="refund-o" text="退款/售后" @click="funD" style="height: 80px" />
        <van-grid-item icon="todo-list-o" text="全部订单" @click="funE" style="width: 40px; height: 80px" />
      </van-grid>
    </div>
    <div class="wodefour">
      <van-grid square style="width: 97%; margin: 0 5px">
        <van-grid-item v-for="(v, index) in arr" :key="index" :icon="v.pic" :text="v.msg" @click="heihei" />
      </van-grid>
    </div>
    <div class="zhuli">
      <p>助力海南自贸港建设</p>
    </div>
    <div class="text">
      <p>三亚国际免税城 | 海口国际免税城</p>
      <p>三亚凤凰什么店 | 海口广电店 | 海口兰州机场店 | 继海免税店</p>
      <p>
        <van-icon name="discount" color="#e53125" />
        中国旅游集团中免股份有限公司
      </p>
    </div>
    <footVue></footVue>
  </div>
</template>
  
<script>
// import footervue from "../home/footer.vue";
import footVue from '@/components/marao/homepage/foot.vue';
export default {
  data() {
    return {
      arr: [
        { pic: "vip-card-o", msg: "中免会员" },
        { pic: "balance-o", msg: "额度查询" },
        { pic: "comment-o", msg: "购买人信息" },
        { pic: "todo-list-o", msg: "信息变更" },
        { pic: "send-gift-o", msg: "商户资质" },
        { pic: "user-o", msg: "提袋人信息" },
        { pic: "upgrade", msg: "购买须知" },
        { pic: "shield-o", msg: "帮助中心" },
      ],
    };
  },
  components: {
    // footervue,
    footVue
  },
  methods: {
    heihei() {
      console.log(111)
    },
    golog() {
      this.$router.push('/dl')
    },
    funA() {
      this.$router.push('/executory').catch(err => { });
    },
    funB() {
      this.$router.push('/executory2').catch(err => { });
    },
    funC() {
      this.$router.push('/executory3').catch(err => { });
    },
    funD() {
      this.$router.push('/executory4').catch(err => { });
    },
    funE() {
      this.$router.push('/executory5').catch(err => { });
    },
    rightClick() {
      this.$router.push('/xinxi').catch(err => { });
    }
  }
};
</script>
  
<style scoped>
.zhuli {
  font-size: 22px;
  color: red;
  text-align: center;
  font-weight: 600;
  margin-top: 20px;
}

.text {
  margin-top: 20px;
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-bottom: 50px;
}

.wode {
  width: 100%;
  padding-top: 30px;
  background: url(https://m.cdfgsanya.com/wap/resources/images/user-bg@2x.9c893f04.png) no-repeat 0 0;
  background-size: 100% auto;
  background-color: #efeff5;
  background-position-y: -20px;
}

.wode .wodeone {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.wode .wodeone .wode1 img {
  width: 60px;
  height: 60px;
  /* background: url(../../../assets/logo.png); */
  border-radius: 30px;
  margin-right: 5px;
}

.wode .wodeone span {
  font-size: 14px;
}

.wodetwo {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.wodetwo>.wodetwo1 {
  text-align: center;
}

.wodetwo .wodetwo1 span {
  display: block;
  border-right: 1px dashed gray;
  width: 95px;
}

.wodetwo .wodetwo1 span:nth-child(2) {
  font-size: 12px;
  color: gray;
}

.wodethree {
  width: 100%;
  height: 80px;
  text-align: center;
}

.wodethree span {
  width: 182px;
  height: 35px;
  text-align: center;
  display: inline-block;
  background-color: white;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
  line-height: 35px;
  font-size: 12px;
  margin-top: 15px;
}

.wode .w1 {
  background-color: rgba(197, 194, 194, 0.356);
  color: rgb(105, 103, 103);
}

.wodefour {
  margin-top: 70px;
  width: 100%;
}

.wodefive {
  width: 100%;
  height: 70px;
}

.wodefive img {
  width: 100%;
}
</style>